<template>
	<view class="edit">
		<view class="header-box">
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1"
				width="100" height="100">
				<image class="user-header" :src="userinfo.avatar" mode="widthFix"></image>
			</u-upload>
			<text class="header-tips">点击图片修改头像</text>
		</view>
		<view class="edit-list">
			<u-cell-group>
				<block v-for="(item,index) in editList" :key="index">
					<u-cell size="large" :title="item.title"
						:value="(index===3||index===4)?(index===3?heightUnit:weightUnit):item.value" isLink
						@click="doEdit(index)"></u-cell>
				</block>
			</u-cell-group>
		</view>
		<view class="btn-box">
			<u-button text="保存信息" @click="doSendEdit"
				color="linear-gradient(to right, rgb(54, 183, 183), rgb(130, 149, 183))"></u-button>
		</view>
		<!-- 修改信息对话框 -->
		<u-modal :title="dialogTitle" :show="show" :content="content" closeOnClickOverlay showCancelButton
			width="500rpx">
			<u--input :placeholder="placeHolder" border="bottom" clearable v-model="inputValue"></u--input>
			<u-button slot="confirmButton" text="确定" type="success" shape="circle" @click="doConfirm"
				color="linear-gradient(to right, rgb(54, 183, 183), rgb(130, 149, 183))"></u-button>
			<u-button slot="confirmButton" text="取消" type="" shape="circle" @click="show = false"></u-button>
		</u-modal>
		<!-- 日期选择器 -->
		<u-datetime-picker :show="showDate" mode="date" @cancel="cancelDate" @confirm="confirmDate"
			minDate="-631180800000"></u-datetime-picker>
		<!-- 性别选择器 -->
		<u-picker :show="showSex" :columns="columnsSex" @cancel="cancelSex" @confirm="confirmSex"></u-picker>
	</view>
</template>

<script>
	import { sendHeadImage, changeUserInfo } from '@/config/api.js'
	import { mapState, mapActions } from 'vuex'
	export default {
		data() {
			return {
				editList: [],
				fileList: [],
				show: false,
				showDate: false,
				showSex: false,
				dialogTitle: '',
				inputValue: '',
				placeHolder: '',
				columnsSex: [
					['男', '女']
				],
				currDialogIndex: -1,
				heightUnit: -1,
				weightUnit: -1
			}
		},
		onLoad() {
			this.editList = [{ title: '昵称', value: this.userinfo.nickName, eTitle: 'nickName' },
				{ title: '性别', value: this.userinfo.sex, eTitle: 'sex' },
				{ title: '生日', value: this.userinfo.birthday, eTitle: 'birthday' },
				{ title: '身高', value: this.userinfo.height, eTitle: 'height' },
				{ title: '体重', value: this.userinfo.weight, eTitle: 'weight' },
				{ title: '手机号', value: this.userinfo.phone, eTitle: 'phone' },
				{ title: '邮箱', value: this.userinfo.email, eTitle: 'email' },
			]
			console.log(this.editList)
		},
		computed: {
			...mapState(['userinfo', 'loginState']),
			height() {
				return this.editList.length ? this.editList[3].value : undefined
			},
			weight() {
				return this.editList.length ? this.editList[4].value : undefined
			}
		},
		watch: {
			height(v1) {
				this.heightUnit = v1 > 0 ? v1 + 'cm' : ''
			},
			weight(v1) {
				this.weightUnit = v1 > 0 ? v1 + 'kg' : ''
			}
		},
		methods: {
			...mapActions(['updateuserinfo', ]),
			//根据index弹出不同的修改框
			doEdit(index) {
				switch (index) {
					//性别选择器
					case 1:
						this.showSex = !this.showSex
						break
						//时间选择器
					case 2:
						this.showDate = !this.showDate
						break
					default:
						switch (index) {
							case 0:
								this.placeHolder = '请输入1-8位昵称'
								break
							case 3:
								this.placeHolder = '请输入身高(单位：cm)'
								break
							case 4:
								this.placeHolder = '请输入体重(单位：kg)'
								break
							default:
								this.placeHolder = '请输入你的' + this.editList[index].title
						}
						this.currDialogIndex = index
						this.show = !this.show
						this.dialogTitle = '请输入你的' + this.editList[index].title
				}
			},
			//修改框确认判断
			doConfirm() {
				let str = this.inputValue
				if (str.length > 0) {
					switch (this.currDialogIndex) {
						case 0:
							if (str.length > 8) {
								this.showMyToast('请输入1-8位昵称')
								return
							}
							break
						case 3:
							if (isNaN(str)) {
								this.showMyToast('请输入数字')
								return
							}
							break
						case 4:
							if (isNaN(str)) {
								this.showMyToast('请输入数字')
								return
							}
							break
						case 5:
							if (!uni.$u.test.mobile(str)) {
								this.showMyToast('手机号码格式错误')
								return
							}
							break
						case 6:
							if (!uni.$u.test.email(str)) {
								this.showMyToast('邮箱格式错误')
								return
							}
							break
					}
					switch (this.currDialogIndex) {
						case 3:
						case 4:
							this.editList[this.currDialogIndex].value = Number(this.inputValue)
							break
						default:
							this.editList[this.currDialogIndex].value = this.inputValue
					}
					this.editList[this.currDialogIndex].flag = true
					this.show = !this.show
					this.inputValue = ''
				} else {
					this.showMyToast('您还为未输入文字')
				}
			},
			//保存信息操作
			async doSendEdit() {
				uni.showLoading({
					title: '保存信息中',
					mask: true
				})
				//判断是否修改头像
				if (this.fileList.length) {
					const res = await sendHeadImage(this.userinfo.pid, this.fileList[0].url)
					this.userinfo.avatar = res.avatar
				}
				let changeFlag = false
				for (let item of this.editList) {
					if (item.flag) {
						changeFlag = true
					}
					this.userinfo[item.eTitle] = item.value
				}
				//判断是否修改数据
				if (changeFlag) {
					const res2 = await changeUserInfo(this.userinfo)
					this.updateuserinfo(res2.data)
				} else if (this.fileList.length) {
					this.updateuserinfo(this.userinfo)
				} else {
					this.showMyToast('您还未对信息进行更改')
					return
				}
				setTimeout(() => {
					uni.hideLoading()
					uni.navigateBack({
						success() {
							uni.showToast({
								title: "修改成功",
								duration: 1000,
								icon: 'none'
							})
						}
					})
				}, 1000)
			},
			//删除预上传图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增预上传图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map(item => {
					this.fileList.push({
						...item,
						status: 'success',
						message: ''
					})
				})
			},
			//关闭日期选择器
			cancelDate() {
				this.showDate = !this.showDate
			},
			//关闭性别选择器
			cancelSex() {
				this.showSex = !this.showSex
			},
			//获取选中的日期
			confirmDate(e) {
				const timeFormat = uni.$u.timeFormat
				let time = timeFormat(e.value, 'yyyy-mm-dd')
				this.editList[2].value = time
				this.editList[2].flag = true
				this.showDate = !this.showDate
			},
			//获取选择性别
			confirmSex(e) {
				this.editList[1].value = e.value[0]
				this.editList[1].flag = true
				this.showSex = !this.showSex
			},
			showMyToast(str) {
				uni.showToast({
					title: str,
					duration: 1000,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.edit {
		.header-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 50rpx;

			.user-header {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50px;
			}

			.header-tips {
				font-size: 28rpx;
				color: #dadada;
				margin-top: 10rpx;
			}
		}

		.edit-list {
			margin-top: 30rpx;
		}

		.btn-box {
			width: 600rpx;
			margin: 50rpx auto;
		}
	}
</style>
